<template>
  <x-sub-page :isFixBtn="true">
    <div class="pricing-detail">
      <x-tab title="基础信息:" :isShowExpand="false">
        <el-descriptions
          direction="vertical"
          :column="3"
          label-class-name="title-style"
          content-class-name="content-style"
        >
          <el-descriptions-item label="定价单号">{{ detail.number | emptyVal }}</el-descriptions-item>
          <el-descriptions-item label="状态">{{
            selectDictLabel(dictOptions['srm_pricing.state'], detail.state) | emptyVal
          }}</el-descriptions-item>
          <el-descriptions-item label="询价标题">{{ detail.enquiryTitle | emptyVal }}</el-descriptions-item>
          <el-descriptions-item label="采购组织">{{ detail.purchaseOrg | emptyVal }}</el-descriptions-item>
          <el-descriptions-item label="采购组">{{ detail.purchaseTeam | emptyVal }}</el-descriptions-item>
          <el-descriptions-item label="货币">{{ detail.currency | emptyVal }}</el-descriptions-item>
          <el-descriptions-item label="定价结束时间">{{ detail.endDate | emptyVal }}</el-descriptions-item>
          <el-descriptions-item label="创建人">{{ detail.createName | emptyVal }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ detail.createTime | emptyVal }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions
          direction="vertical"
          :column="1"
          label-class-name="title-style"
          content-class-name="content-style"
        >
          <el-descriptions-item label="定价说明"> {{ detail.remark | emptyVal }} </el-descriptions-item>
        </el-descriptions>
      </x-tab>
      <x-tab title="物料定价信息:" :isShowExpand="false">
        <x-table
          ref="tableCom"
          :isPagination="false"
          :data-source="tableData"
          :row-key="'id'"
          :height="tableData.length * 42 + 124 || 280"
        >
          <el-table-column :label="$t('common.serialNumber')" :width="55" fixed type="index" />
          <el-table-column
            v-for="(item, index) in tableColumns"
            :key="index"
            :prop="item.prop"
            :fixed="item.fixed"
            :show-overflow-tooltip="true"
            :width="item.width"
            :min-width="item.minWidth"
            :label="item.label"
            :sortable="'custom'"
          >
            <template #default="scope">
              <span v-if="item.prop === 'result'">
                {{ selectDictLabel(dictOptions['srm_pricing_detail.result'], scope.row[item.prop]) | emptyVal }}
              </span>
              <span v-else-if="item.prop === 'deliveryDate'">
                {{ replaceDateTime(scope.row[item.prop]) }}
              </span>
              <span v-else-if="item.prop === 'materialUnit'">{{
                selectDictLabel(dictOptions['srm_material.material_unit'], scope.row[item.prop]) | emptyVal
              }}</span>
              <span v-else-if="item.prop === 'unitPrice'">{{ parseFloat(scope.row[item.prop]).toFixed(2) }}</span>
              <span v-else>{{ scope.row[item.prop] | emptyVal }}</span>
            </template>
          </el-table-column>
        </x-table>
      </x-tab>
    </div>
    <fixed-btn-area>
      <el-button @click="goBack"> 返回 </el-button>
    </fixed-btn-area>
  </x-sub-page>
</template>

<script>
  import { PermissionsMixin, QueryDictMixin, TableListMixin, selectDictLabel, replaceDateTime } from '@package/utils'
  import {
    apiGetPricingDetail,
    apiRevocationPricing,
    apiSendPricing
  } from '@/modules/purchaseSearchSource/api/managePricing.js'
  import { detailColumns } from '@/modules/purchaseSearchSource/config/managePricing.js'
  import { EnumApiCode } from '../../../../../../globalEnum.js'

  export default {
    name: 'ManagePricingDetail',
    mixins: [PermissionsMixin, QueryDictMixin, TableListMixin],
    inject: ['closePages'],
    data() {
      return {
        columns: detailColumns,
        detail: {},
        srmDictKeys: ['srm_pricing.state', 'srm_pricing_detail.result', 'srm_material.material_unit'],
        id: null
      }
    },
    watch: {
      id: {
        handler(val) {
          if (val) {
            this.getDetail()
          }
        },
        immediate: true
      }
    },
    created() {
      this.id = this.$route.query.id
    },
    methods: {
      replaceDateTime,
      selectDictLabel,
      handleBack() {
        this.$router.go(-1)
        this.closePages()
      },
      async getDetail() {
        const { data } = await apiGetPricingDetail(this.id)
        this.detail = data || {}
        this.tableData = data?.details || []
      },
      async send() {
        const confirm = await this.$confirm('是否确认发送定价单?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        if (confirm) {
          const { code } = await apiSendPricing(this.id)
          if (code === EnumApiCode.Success) {
            this.$message.success('发送成功')
            await this.goBack()
          }
        }
      },
      async revocation() {
        const confirm = await this.$confirm('是否确认悔标?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        if (confirm) {
          const { code } = await apiRevocationPricing(this.id)
          if (code === EnumApiCode.Success) {
            this.$message.success('悔标操作成功')
            await this.goBack()
          }
        }
      },
      async goBack() {
        this.$router.go(-1)
        this.closePages()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .pricing-detail {
    height: 100%;
    overflow: auto;
    ::v-deep .title-style {
      color: #707683;
      font-size: 14px;
    }
    ::v-deep .content-style {
      padding-bottom: 20px;
      color: #333;
      font-size: 14px;
    }
    .table-title {
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      color: #707683;
      font-weight: normal;
    }
  }
</style>
